<template>
  <div class="cart">
    <el-table :data="cartStore.items" style="width: 100%">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="数量">
        <template #default="{ row }">
          <el-input-number v-model="row.quantity" :min="1" @change="() => updateQuantity(row)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="() => removeItem(row.id)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="total-price">
      总价：{{ cartStore.totalPrice }}
    </div>
  </div>
</template>

<script setup>
import { useCartStore } from '../stores/cartStore';

const cartStore = useCartStore();

const updateQuantity = (item) => {
  // 更新商品数量
  if (item.quantity <= 0) {
    cartStore.removeItem(item.id);
  } else {
    cartStore.updateItemQuantity(item.id, item.quantity);
  }
};

const removeItem = (id) => {
  // 移除商品
  cartStore.removeItem(id);
};


</script>

<style>
.cart {
  margin: 20px;
}

.total-price {
  margin-top: 20px;
  text-align: right;
  font-size: 1.2em;
  font-weight: bold;
}
</style>
